<template>
  <div>
    <!-- 顶部和搜索---------------------------------------- -->
    <div class="header-content">
      <!-- 1. 轮播图 -->
      <!-- element-ui轮播 -->
      <!-- <MyBanner :banner='banner'/> -->
      <!-- swiper插件实现轮播 -->
      <SwiperBanner :banner="banner" />

      <!-- 2. 搜索区域 -->
      <div class="q-home-search">
        <div class="block">
          <!-- 
            element-ui 选项卡
              tabs 选项卡容器
                  v-model="activeName"  当前高亮选项卡
                  type="card"           类型
                  @tab-click="handleClick" 点击选项卡触发事件
              tab-pane 每一项内容
                label 标题
                name  标识
          -->
          <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
          </el-tabs>-->
          <!-- 自己写选项卡内容 -->
          <div class="tabs">
            <div class="tab" :class="{current:num==0}" @click="changeTabs(0)">看攻略</div>
            <div class="tab" :class="{current:num==1}" @click="changeTabs(1)">做行程</div>
            <div class="tab" :class="{current:num==2}" @click="changeTabs(2)">特价酒店</div>
          </div>
          <div class="tabs-content">
            <div class="item" :class="{active:num==0}">
              <div class="input-control">
                <!-- 
                    el-input 输入框
                      v-model="input"  获取输入的值
                      事件：
                        blur	在 Input 失去焦点时触发	(event: Event)
                        focus	在 Input 获得焦点时触发	(event: Event)
                        change	仅在输入框失去焦点或用户按下回车时触发	(value: string | number)
                        input	在 Input 值改变时触发	(value: string | number)

                -->

                <el-input v-model="input" @focus="focus" placeholder="搜目的地/主题攻略/问题"></el-input>
              </div>
              <div class="button-control">
                <el-button>搜索旅行攻略</el-button>
              </div>
            </div>
            <div class="item" :class="{active:num==1}">222</div>
            <div class="item" :class="{active:num==2}">3333</div>
          </div>
        </div>
        <div class="block-list" v-if="isShowSearch">
          <!-- 热门城市 -->
          <div class="hot-citys" v-if="isShowList">
            <h2>热门城市</h2>
            <div class="citys">
              <div class="cityname" v-for="item in citys" :key="item.id">{{item.name}}</div>
            </div>
          </div>
          <!-- 搜索列表 -->
          <div class="search-list" v-else>
            <h2>搜索列表</h2>
            <ul class="list">
              <li v-for="item in list" :key="item.id">
                <span>{{item.name}}</span>
                <span class="en">{{item.en_name}},</span>
                <span v-if="item.city">{{item.city.name}},</span>
                <span v-if="item.province">{{item.province.name}},</span>
                <span v-if="item.country">{{item.country.name}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!--3.  定位蒙层 -->
      <div class="search-bg-layer" @click="showLayer" v-if="isShow"></div>
      <!-- 热门城市 -->
      <!-- 
            搜索框区域：
              1. 聚焦了 input 
                  全屏蒙层 热门城市  -- 显示

              2. 点击蒙层 
                  全屏蒙层 热门城市  -- 隐藏

              3. 搜索内容的时候
                全屏蒙层  --- 显示
                热门城市   -- 隐藏
                新搜索列表 -- 显示

              4. 输入内容-清空
                新搜索列表 -- 隐藏
                全屏蒙层  --- 显示
                热门城市   -- 显示
      -->
    </div>

    <!-- -----两个图片----------------------------------- -->
    <div class="section-gray">
      <div class="section">
        <ul>
          <li>
            <img src="@/assets/images/left.jpg" width="740px" alt />
          </li>
          <li>
            <img src="@/assets/images/right.jpg" width="400px" alt />
          </li>
        </ul>
      </div>
    </div>

    <!-- 今日推荐 -------------------------------------------->
    <div class="section">
      <div class="wrapper">
        <div class="title-th">
          <a href="##" class="notice">
            <span>出境游安全提示</span>
          </a>今日推荐
        </div>
        <div class="content">
          <el-row :gutter="20">
            <el-col :span="6" v-for="item in todayList" :key="item.data.id">
              <div class="item">
                <div class="img-info">
                  <img :src="item.data.pic" width="100%" alt />
                  <span v-if="item.type=='bbs'">游记</span>
                  <span v-else-if="item.type=='video'">视频</span>
                  <span v-else>商城</span>
                </div>
                <div class="info">
                  <div class="subtitle">{{ item.data.subject}}</div>

                  <div class="bottom" v-if="item.type=='bbs'">
                    <span class="f14">{{item.data.username}}</span>
                    <span class="fr">{{item.data.views}}人预览过</span>
                  </div>
                  <div class="bottom" v-else-if="item.type=='video'">
                    <span class="fr">{{item.data.tag}}</span>
                    <span class="f14">{{item.data.desc}}</span>
                  </div>
                  <div class="bottom" v-else>
                    <span class="fr" v-html="item.data.price"></span>
                    <span class="f14">{{item.data.start_pos}}</span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- <div class="section">
      <div class="wrapper">
        <div class="title-th">
          <a href="##" class="notice">
            <span>出境游安全提示</span>
          </a>今日推荐
        </div>
        <div class="content">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="item">
                <div class="img-info">
                  <img src="@/assets/images/right.jpg" width="100%" alt />
                  <span>游记</span>
                </div>
                <div class="info">
                  <div class="subtitle">文字介绍</div>
                  <div class="bottom">
                    <span class="fr">291赞</span>
                    <span class="f14">余余252</span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>-->

    <!-- 穷游商城 --------------------------------------------->
    <HomeShop></HomeShop>
    <!-- 热门游记与话题----------------------------------- -->
    <HomeTravel />

    <!-- 底部区域 ---------------------------------------->
    <Footer/>
    <!-- 返回顶部 -->
     <el-backtop></el-backtop>
  </div>
</template>

<script>
import MyBanner from "./MyBanner.vue";
import SwiperBanner from "./SwiperBanner.vue";
import HomeShop from "./HomeShop.vue";
import HomeTravel from "./HomeTravel.vue";
// import Footer from '../../components/footer/Index.vue'
import banner from "../../utils/banner";
import api from "../../api/index";
export default {
  components: {
    MyBanner,
    SwiperBanner,
    HomeShop,
    HomeTravel,
    // Footer
  },
  data() {
    return {
      banner: [],
      activeName: "first",
      num: 0,
      isShow: false, //控制蒙层
      isShowSearch: false, //控制搜索下拉框
      input: "",
      isShowList: true,
      citys: [], //热门城市
      list: [], //搜索列表数据
      todayList: [] //今日推荐数据容器
    };
  },
  created() {
    console.log("banner", banner);
    this.banner = banner.list;
    //获取热门城市
    this.getHotCitys();
    //获取今日推荐
    this.getTuijian();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //选项卡
    changeTabs(val) {
      this.num = val;
      this.isShowSearch = false;
    },
    //获取焦点
    focus() {
      console.log("获取焦点-----");
      this.isShow = true;
      this.isShowSearch = true;
    },
    //点击蒙层
    showLayer() {
      console.log("点击蒙层-----");
      this.isShow = false;
      this.isShowSearch = false;
    },
    //定义函数---获取热门城市----------------
    async getHotCitys() {
      let res = await api.getHotCitys();
      console.log("获取热门城市---", res.data.result.hotcity);
      this.citys = res.data.result.hotcity;
    },
    //搜索接口
    async getSearch(params) {
      let res = await api.getSearch(params);
      console.log("搜索接口---", res.data);
      console.log("搜索接口---", res.data.data.list);
      this.list = res.data.data.list;
    },
    //今日推荐
    async getTuijian() {
      let res = await api.getTuijian();
      console.log("今日推荐----", res.data);
      this.todayList = res.data.data;
    }
  },
  //侦听器--检测input里面的值
  watch: {
    input(val) {
      if (val) {
        //说明你有输入的内容--做模糊查询
        this.isShowList = false;
        //搜索请求----------------------
        this.getSearch({ keyword: val });
      } else {
        this.isShowList = true;
      }
    }
  }
};
</script>

<style scoped lang='less'>
.header-content {
  width: 100%;
  height: 400px;
  position: relative;
}
//搜索
.q-home-search {
  position: absolute;
  z-index: 200;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -395px;
  width: 792px;
  // background: skyblue;
  height: 116px;
  .block {
    position: relative;
    border-radius: 6px;
    .tabs {
      height: 52px;
      overflow: hidden;
    }
    .tab {
      float: left;
      width: 264px;
      height: 52px;
      text-align: center;
      font: 300 20px/52px PingFangSC-light;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      color: hsla(0, 0%, 100%, 0.8);
      transition: color 0.5s linear;
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.75);
      float: left;
    }
    .current {
      background-image: linear-gradient(
        90deg,
        rgba(40, 213, 164, 0.8),
        rgba(38, 208, 181, 0.8)
      );
      color: #fff;
      font-weight: 600;
      background-color: transparent;
    }
    .tabs-content {
      background-image: linear-gradient(
        90deg,
        rgba(21, 219, 145, 0.8),
        rgba(6, 204, 199, 0.8)
      );
      position: relative;
      padding: 10px;
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
      .item {
        // width: 620px;
        display: none;
        height: 44px;
        width: 782px;
      }
      .active {
        display: block;
      }
      .input-control {
        float: left;
        width: 630px;
        height: 44px;
        background: #fff;
        border-radius: 6px;
        position: relative;
        margin-right: 6px;
        input {
          box-sizing: border-box;
          border: 0;
          padding: 0 27px;
          width: 100%;
          height: 44px;
          font-size: 18px;
          border-radius: 6px;
          color: #000;
        }
        /deep/ .el-input__inner {
          height: 44px;
          line-height: 44px;
          outline: none;
          border: none;
        }
      }
      .button-control {
        float: left;
        width: 126px;
      }
      /deep/ .el-button {
        padding: 14px 20px;
        background: transparent;
        color: #fff;
      }
    }
  }
  .block-list {
    position: absolute;
    background: hsla(0, 0%, 100%, 0.95);
    min-height: 200px;
    left: 10px;
    top: 112px;
    width: 570px;
    border-radius: 6px;
    padding: 20px 30px;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
    h2 {
      position: relative;
      padding: 20px 0 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      font-size: 16px;
      line-height: 1;
      color: #000;
      font-weight: normal;
    }
    .cityname {
      margin-top: 20px;
      margin-right: 30px;
      float: left;
      font-size: 14px;
      cursor: pointer;
      color: #636363;
    }
    .list li {
      position: relative;
      // padding: 0 30px;
      min-height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #000;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      span {
        margin-left: 4px;
      }
      .en {
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
.search-bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: hsla(0, 0%, 100%, 0.8);
}

// 两个图片----------------------------------
.section {
  position: relative;
  padding: 10px 0;
  width: 1160px;
  margin: 0 auto;
}

.section-gray {
  border-color: #ececec;
  border-style: solid;
  border-width: 1px 0;
  background-color: #f5f5f5;

  ul {
    overflow: hidden;
    margin-right: -20px;
    // height: 110px;
  }

  ul li {
    float: left;
    margin-right: 20px;
    height: 110px;
    border-radius: 3px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
  }
}

// 今日推荐------------------------------------
.title-th {
  margin: 10px;
  height: 74px;
  color: #636363;
  text-align: center;
  font: 36px/74px Hiragino Sans GB, Microsoft YaHei, SimHei, SimSun, sans-serif;

  .notice {
    background: #02db94;
    border-radius: 20px;
    width: 180px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: block;
    position: absolute;
    left: 0;
    top: 17px;

    span:before {
      content: "";
      display: inline-block;
      background: url(https://fes.qyerstatic.com/FoHcIRgBY9BWd6lSLxr6NVArmEaL);
      background-size: 16px 16px;
      vertical-align: -2px;
      height: 16px;
      width: 16px;
      margin-right: 8px;
    }

    span:after {
      content: "";
      display: inline-block;
      background: url(https://fes.qyerstatic.com/FkvmdDl4snzkbZzyQCrfMQMBeicW);
      background-size: 7px 11px;
      width: 7px;
      height: 11px;
      margin-left: 8px;
    }
  }
}

.content {
  .item {
    width: 275px;
    height: 300px;
    margin-bottom: 20px;
    img {
      width: 100%;
      transition: all 1s linear;
    }
    .img-info:hover {
      img {
        transform: scale(1.2);
      }
    }
    .img-info {
      position: relative;
      height: 184px;
      overflow: hidden;
      span {
        position: absolute;
        left: 10px;
        top: 10px;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 6px;
        font-size: 12px;
        padding: 4px 6px;
      }
    }
  }

  .info {
    padding: 0 18px;
    border: 1px solid #ececec;
    border-top: 0;
    height: 114px;
    line-height: 24px;
    overflow: hidden;

    .subtitle {
      margin-top: 14px;
      height: 48px;
      font-size: 16px;
      overflow: hidden;
    }

    .bottom {
      margin-top: 16px;
      height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #636363;
      font-size: 12px;
      font-weight: 700;
      /deep/ em {
        font-size: 20px;
        color: #ff7466;
        font-style: normal;
        font-weight: 500;
      }
      .fr {
        color: #959595;
        float: right;
      }

      .money {
        /deep/ em {
          font-size: 18px;
          color: #ff7466 !important;
          font-style: normal;
        }
      }

      .f14 {
        display: inline-block;
        max-width: 60%;
        min-width: 50%;
        color: #636363;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}
</style>